<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width"/>
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  <title>支付</title>
  <link rel="stylesheet" type="text/css" href="api.css"/>
  <link rel="stylesheet" type="text/css" href="aui.css"/>
  <style>
    html, body {
      width: 100%;
      background: 100%;
      background: rgba(0, 0, 0, 0.3);
    }

    body {
      display: flex;
      flex-flow: column;
    }

    .header {
      position: fixed;
      bottom: 8rem;
      left: 3.4rem;
      height: 14.7rem;
      width: 11.85rem;
      background: white;
      /*padding: 0 0.8rem;*/
      font-size: 0.28rem;
      border-radius: 0.2rem;
    }

    .text {
      text-align: center;
      font-size: 0.8rem;
      margin-top: 0rem;
      margin-bottom: 0rem;
      background-color: #F96B47;
      color: #FFFFFF;
      border-top-left-radius: 0.3rem;
      border-top-right-radius: 0.3rem;
      height: 1.8rem;
      line-height: 1.8rem;
    }

    .header .cancel {
      position: absolute;
      left: 1rem;
      top: 0.9rem;
      width: 0.65rem;
      height: 0.53rem;
      -webkit-transform: translateY(-50%);
      transform: translateY(-50%);
    }

    .header .cancel > img {
      width: 0.65rem;
      height: 0.525rem;
      bottom: 2rem;
    }

    .integral > div:nth-child(1) {
      width: 1rem;
      height: 0.43rem;
      border: 1px #ddd dashed;
      background-color: #FCF2E8;
      color: #FD5E06;
      font-size: 0.24rem;
      line-height: 0.43rem;
      text-align: center;
      float: left;
      margin-right: 0.13rem;
    }

    .integral > div:nth-child(2) {
      float: left;
      line-height: 0.43rem;
      color: #454647;
      font-size: 0.28rem;
    }

    .header > div:nth-child(1) {
      border-bottom: #999 0.01rem solid;
    }

    .mask > div > div:nth-child(1) img {
      width: 1.5rem;
      height: 1.5rem;
      margin: 0.2rem;
    }

    .mask > div:nth-child(1) {
      /*border-bottom: 0.01rem;*/
      border-bottom: 0.01rem solid #999;
    }

    .mask > div > div:nth-child(2) {
      line-height: 0.78rem;
      color: #999999;
      font-size: 0.2rem;
    }

    .mask > div > div:nth-child(2) img {
      width: 0.5rem;
      margin-top: 0.2rem;
      margin-right: 0.2rem;
      margin-left: 0.08rem;
      height: 0.5rem;
    }

    .item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 1.9rem;
      padding: 0 0.5rem;
    }

    .item .right {
      display: flex;
      align-items: center;
    }

    .bottom-btn {
      background-color: #F96B47;
      width: 10.8rem;
      height: 1.8rem;
      border-radius: 0.2rem;
      font-size: 0.8rem;
      font-family: Source Han Sans CN;
      font-weight: 500;
      color: #FFFFFF;
      text-align: center;
      line-height: 1.8rem;
      position: absolute;
      left: 0.5rem;
      top: 10.7rem;
    }

    .moneyNum {
      text-align: center;
      font-size: 1.15rem;
      width: 100%;
      margin-top: 1.2rem;
      font-weight: bold;
    }

    .wx {
      font-size: 0.7rem;
      font-weight: 500;
      color: rgba(69, 70, 71, 1);
    }

    .zfb {
      font-size: 0.7rem;
      font-weight: 500;
      color: rgba(69, 70, 71, 1);

    }
  </style>
</head>

<body>
<div class="header underLine" id="app">
  <div>
    <div class="text">在线支付</div>
    <div class="cancel" onclick="api.closeFrame()"><img src="image/zhongchou/closeFrm2.png" alt=""></div>
  </div>
  <div class="moneyNum">
    <span>￥ 126</span>
  </div>
  <div class="mask">
    <div class="item underLine">
      <div><img src="image/main5/weixin.png" alt=""></div>
      <div class="right">
        <span class="wx">微信支付  </span>
        <img src="image/zhongchou/yuanquan.png" v-if="!isWx" @click="isWx = true;isZhiFuBao = false"
             style="width: 0.9rem;height: 0.9rem" alt="">
        <img src="image/zhongchou/dagoutu.png" v-if="isWx" @click="isWx = true;isZhiFuBao = false"
             style="width: 0.9rem;height: 0.9rem" alt="">
      </div>

    </div>

    <div class="item">
      <div><img src="image/main5/ali.png" alt=""></div>
      <div class="right">
        <span class="zfb">支付宝支付</span>
        <img src="image/zhongchou/yuanquan.png" style="width: 0.9rem;height: 0.9rem" alt=""
             v-if="!isZhiFuBao" @click="isWx = false;isZhiFuBao = true">
        <img src="image/zhongchou/dagoutu.png" style="width: 0.9rem;height: 0.9rem" alt=""
             v-if="isZhiFuBao" @click="isWx = false;isZhiFuBao = true">
      </div>

    </div>
    <div class="bottom-btn" @click="payorder()">
      <span>确认支付</span>
    </div>
  </div>
</div>


<!--<div class="fixed"></div>-->
</body>
<script type="text/javascript" src="script/api.js"></script>
<script type="text/javascript" src="script/utils.js"></script>
<script type="text/javascript" src="script/jquery.min.js"></script>
<script src="script/vue.min.js"></script>
<script src="script/vue-extend.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script>
  var vm;
  apiready = function () {
    console.warn(JSON.stringify(api.pageParam.encrypt));
    var encrypt = api.pageParam.encrypt;
    vm = new Vue({
      el: '#app',
      data: function () {
        return {
          numnum: "",
          money: api.pageParam.money,
          isWx: false,
          isZhiFuBao: false,
        };
      },
      methods: {
        getTextByJs: function (arr) {
          var str = "";
          for (var i = 0; i < arr.length; i++) {
            str += arr[i] + ",";
          }
          //去掉最后一个逗号(如果不需要去掉，就不用写)
          if (str.length > 0) {
            str = str.substr(0, str.length - 1);
          }
          return str;
        },
        payorder: function (type) {
          console.log(api.pageParam.money)
          var _self = this;
          var type = '';
          if (_self.isWx) {
            type = 2
          } else {
            type = 1
          }
          var params = {
            values: {
              type: 1, //现金类型
              user_id: '',
              // user_id: 2197,
              encrypt: encrypt,
              // encrypt:'45f2LEHCg8K1wqEdwqzCpcKiDsOyw5JAOMOWXCoaQyomRhtR',
              money: api.pageParam.money,
              integral: "",
              payment_type: type,
              remark: api.pageParam.noteMoney
            }
          };
          console.log(JSON.stringify(params));
          postAjax(_ApiPath + "api/user/QRcodePay", params, function (ret, err) {
            if (ret.status == 200) {
              api.sendEvent({
                name: 'readyCat',
                extra: {
                  info: ""
                }
              });
              closeWin();
              return false;
            }
            if (ret.status == 220) {
              console.log(JSON.stringify(ret));
              if (_self.isZhiFuBao) {
                AliPay(ret.msg.msg, function (ret) {
                  var params = {
                    money: api.pageParam.money,
                    jifen: api.pageParam.jifen
                  };
                  openWindow('cash_payment_successful_win', 'widget://html/main1/payment/cash_payment_successful_win.html', params);
                  setTimeout(function () {
                    closeWin();
                    api.closeFrame();
                  }, 500);

                }, function (err) {
                  openWindow('cash_payment_failed_win', 'widget://html/main1/payment/cash_payment_failed_win.html', {type: 2});
                  setTimeout(function () {
                    closeWin();
                  }, 500);
                });

              } else if (_self.isWx) {
                WXPay(ret.msg, function (ret) {
                  var params = {
                    money: api.pageParam.money,
                    jifen: api.pageParam.jifen
                  };
                  openWindow('cash_payment_successful_win', 'widget://html/main1/payment/cash_payment_successful_win.html', params);
                  setTimeout(function () {
                    closeWin();
                    api.closeFrame();
                  }, 500);
                }, function (err) {
                  openWindow('cash_payment_failed_win', 'widget://html/main1/payment/cash_payment_failed_win.html', {type: 2});
                  setTimeout(function () {
                    closeWin();
                  }, 500);
                });
              }
            } else {
              console.log(JSON.stringify(err));
              toast(JSON.stringify(ret.msg));
              if (err) {
                console.log(JSON.stringify(err));
                toast(JSON.stringify(err.msg));
              } else {
                console.log(JSON.stringify(ret));
                toast(JSON.stringify(ret.msg));
              }
            }
          });
        }
      },
      watch: {},
      mounted: function () {
        var _self = this;
        $(".integral>div:nth-child(2)>span").text(api.pageParam);
        $(".passw").click(function () {
          $(".inputpass").focus();
        });
        var jsfun = 'thinkshppingCart()';
        api.execScript({
          script: jsfun,
          frameName: 'gouwu_che_frm'
        });
      }
    });

  };


  // 关闭页面
  $(".cancel").click(function () {
    api.sendEvent({
      name: 'Favorable',
      extra: {
        type: 1
      }
    });
    api.closeFrame();
  });

  // 确认
  $(".confirm").click(function () {
    // alert(time)
    api.sendEvent({
      name: 'Favorable',
      extra: {
        type: 2,
        time: time
      }
    });
    api.closeFrame();
  });

  function closeWin() {
    if (api.pageParam.script) {

    } else {
      api.closeWin({});
    }
  };
</script>
</html>
